<template>
    <div class="g-clinic">
        <ul class="m-main">
            <li :class="idx==index?'active':''"  v-for="(item,index) in main" :key="index" @click="show(index)">{{item}}</li>
        </ul>
        <ul class="m-sub" >
            <li v-for="(item,index) in sub[idx]" :key="index"  @click="checkSchedule(item)">
                {{item.departmentName}}
            </li>
        </ul>
        <div v-if="visible" class="mask">
			<div class="note">
				<div class="info" @scroll="divScroll">
					<h2>挂号须知</h2>
					<p>尊敬的患者和家属您好:</p>
					<p>
						欢迎使用廊坊市人民医院公众号线上挂号系统,本系统为自费患者提供在线建档、挂号、缴费、查询等服务,使用廊坊市社保卡挂号患者在此系统不能享受14元报销政策，故请持廊坊地区社保卡（职工医保及城乡居民）患者谨慎使用该系统挂号；门诊特殊疾病患者需到三楼人工窗口缴费；职工医保患者不能在此系统使用医保账户内资金。
					</p>
					<p>一、注册建卡</p>
					
					<p>我院实行实名制就诊,请在就诊人管理一栏准确填写就诊人真实信息.初次建卡者请使用在线建档,曾办理我院就诊卡者选择添加就诊人,默认就诊人后即可使用.</p>
					
					<p>二、挂号</p>
					<p>您可预约7天以内所有科室开放号源,<span style="color: red;">预约截止时间为就诊当天零时</span>,预约放号时间为每天零时,当天号源开放时间为早7点.</p>
					<p>我院挂号系统分当日挂号和预约挂号,请您认真选择.</p>
					
					<p>三、退号</p>
					
					<p>为节约医疗资源,请您谨慎对待退号事宜.如需退号,请在就诊当天前一日23:00前取消预约.就诊当天选择退号的,上午号请于12:00前,下午号请于17:00前办理(电话及人工窗口预约后无法按时就诊的，退号时间为：上午十点前，下午16点前，电话：2369587，不及时告知视为爽约，爽约三次将取消预约挂号资格一个月).如医生接诊后,将不予办理退号事宜.</p>
					
					四、就诊
					<p>(1)预约成功后,请您按预约提示时间提前半小时到达诊区</p>
					
					<p>(2)到达诊区后,请先到自助机自助报到,方可候诊(简易门诊及未在门诊楼出诊的科室暂时除外，请您随时关注我院相关信息变动)</p>
					
					<p>注意事项:</p>
					
					<p>(1)	上午号请您务必于11:30前就诊,下午号请您务必于17:00前就诊,过时无法接诊</p>
					<p>(2)	如遇医师因特殊情况停、替诊时,技术平台将推送信息给您,请您及时更改就诊日期或其他医师,请您注意信息推送.</p>
					<p>(3)	简易门诊、专病门诊有特定诊疗范围,非指定范围无法接诊，请您关注我院公众号信息.</p>
					<p>五、缴费</p>
					<p>我院公众号为自费患者提供缴费功能</p>
					<p>六、查询</p>
					<p>我院公众号可提供化验单、住院一日清单查询功能</p>
					<p>温馨提示:</p>
					<p>为符合国家疫情防控要求,进入门诊所有人员需佩戴口罩(带气阀口罩除外),进入大厅前请扫健康码,绿码方可进入,请积极主动配合预检分诊人员疫情排查工作,感谢您的理解与支持!</p>
				</div>
				<div class="btns">
					<div class="agree"><input type="checkbox" @click="funcAgree()" :disabled="checkFlag">我已阅读并同意《廊坊市人民医院挂号须知》</div>
					<div class="sure" v-on:click="quding">确定</div>
				</div>
			</div>
		</div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            idx:0,
            main:[],
            sub:[],
            visible:true,
            agreeV:'',
            agreeM:'',
            checkFlag: true,
            agreeFlag: false
        }
    },
    created(){
        this.getClinic()
    },
    methods:{
        getClinic(){
            this.$store.commit('setLoading',true)
            this.$api.getClinic().then(res=>{
                this.$store.commit('setLoading',false);
                this.main=res.data.firstDept;
                this.sub=res.data.secondDept 
            })
        },
        show(index){
            this.idx=index;
        },
        checkSchedule(obj){
            this.$router.push({name:'schedule',query:{from:obj.departmentName,deptcode:obj.departmentCode}})
        },
        quding() {
            console.log(this.agreeFlag)
            if(!this.agreeFlag) {
                alert('请同意挂号须知后继续操作')
            } else{
                this.visible = false
            }
        },
        funcAgree() {
            console.log(event.target.checked)
            this.agreeFlag = event.target.checked
        },
        divScroll(div) {
            if((div.target.scrollHeight - div.target.offsetHeight) - div.target.scrollTop < 1) {
                this.checkFlag = false
            }
        }
    }
}
</script>
<style lang="less">
.g-clinic{
    height: 100%;
    overflow: hidden;
    display: flex;
}
.m-main,.m-sub{
    height: 100%;
    overflow: auto;
    display: flex;
    flex-direction: column;
    
}
.m-main{
    >li{
        width: 100%;
        padding: 10px;
        font-size: 14px;
        border-bottom: 1px solid rgb(243, 243, 243);
        border-left:4px solid transparent;
        position: relative;
    }
    >li.active{
        border-left:4px solid #0077DD;
    }
    >li.active::before{
        position: absolute;
        left: 0;
        top: 50%;
        margin-top:-2px;
        content: '';
        width: 0;
        height: 0;
        border: 4px solid transparent;
        border-left-color: #0077dd;

    }
}
.m-sub{
    flex: 1;
    flex-direction: column;
    >li{
        width: 100%;
        padding: 10px;
        border-bottom: 1px solid rgb(243, 243, 243);
        font-size: 12px;
    }
}
.m-main{
    width:55%;
    background-color:rgb(247, 247, 247);
}

html,body{
    margin: 0;
    padding: 0;
    height: 100%;
}
.mask{
    position: fixed;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,.5);
    z-index: 2;
    display: flex;
}
.mask .note{
    background: #ffffff;
    flex: 1;
    margin: 20px 10px;
    padding:20px 20px 0 20px;
    display: flex;
    flex-direction: column;
    
}
.note h2{
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #999999;
}
.note p{
    margin: 8px 0;
}
.note .info{
    flex:1;
    color: #747474;
    overflow: auto;
}
.btns{
    border-top: 1px solid #999999;
    display: flex;
    align-items: center;
}
.btns .agree{
    width: 60%;
    padding: 5px 0;
    border-right: 1px solid #999999;
}
.btns .sure{
    flex: 1;
    align-items: center;
    text-align: center;
    
}
</style>